// 楼栋数据
(function () {
  let left2_L = document.querySelector('.box_content .left2_L');
  let dateList = [
    {
      name: '1号楼',
      value: 0.98
    },
    {
      name: '2号楼',
      value: 0.98
    },
    {
      name: '3号楼',
      value: 0.98
    }
  ];
  const inn = dateList
    .map((v) => {
      return `<div><p>${v.name}</p><p><e></e>园区入住率:<span>${toFixedVal(
        v.value
      )}</span>%</p> </div>`;
    })
    .forEach((v) => {
      left2_L.innerHTML += v;
    });

  function toFixedVal(val) {
    return (val * 100).toFixed(2);
  }
})();

// 园区运营可视化

(function () {
  let doms = document.querySelector('.left3 .box_content.left3_echart');
  let myChart = echarts.init(doms);
  let option = {
    color: ['#0C4CAA', '#00ABFF', '#BFE92C', '#fff'],
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
      orient: 'vertical',
      left: 10,
      data: [
        '服务：工商、财税、行政',
        '人才：招聘、活动',
        '创新：创业、金融',
        '党建：活动 政策：活动'
      ],
      left: '26%',
      bottom: 40,
      icon: 'rect',
      itemWidth: 16,
      itemHeight: 16,
      padding: 0,
      itemGap: 16,
      textStyle: {
        color: '#fff',
        fontSize: 16
      }
    },
    series: [
      {
        name: '园区运营',
        type: 'pie',
        radius: ['40%', '50%'],
        center: ['50%', '40%'],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: '18',
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: [
          {
            value: 335,
            name: '服务：工商、财税、行政'
          },
          {
            value: 310,
            name: '人才：招聘、活动'
          },
          {
            value: 234,
            name: '创新：创业、金融'
          },
          {
            value: 135,
            name: '党建：活动 政策：活动'
          }
        ]
      }
    ]
  };
  myChart.setOption(option);
  window.addEventListener('resize', () => {
    myChart.resize();
  });
})();

// 招商内容

(function () {
  const contant = document.querySelector('.right_top_end .end2 .con .attract');

  const date = [
    {
      name: '招商团队',
      num: 143
    },
    {
      name: '招商活动',
      num: 143
    },
    {
      name: '招商项目',
      num: 143
    }
  ];

  const htmlval = date
    .map((v) => {
      return `<div class="item"><span>${v.name}</span><span>${v.num}</span>人</div>`;
    })
    .forEach((v) => {
      contant.innerHTML += v;
    });
})();

//战略合作
(function () {
  const container = document.querySelector('.end3 .box_content ul');

  const date = [
    '阿里巴巴',
    '东华软件',
    '微软',
    '华为',
    '云上江西',
    '联想新世界',
    '科大讯飞',
    '数字江西',
    '海康威视'
  ];

  const htmlval = date
    .map((v) => {
      return `<li>${v}</li>`;
    })
    .forEach((v) => {
      container.innerHTML += v;
    });
})();

// //  能耗管理  水
(function () {
  let myChart = echarts.init(
    document.querySelector('.right_bottom .bl_top .box_content')
  );
  let option = {
    color: ['#02D3FF', '#2274DA', '#DC9C2A'],
    title: {
      text: '水',
      textStyle: {
        color: '#fff',
        fontSize: 16
      }
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      right: 0,
      top: 10,
      itemWidth: 12,
      itemHeight: 12,
      icon: 'rect',
      data: ['1号楼', '2号楼', '3号楼'],
      textStyle: {
        color: '#fff',
        fontSize: 14
      }
    },
    grid: {
      top: '30%',
      left: '3%',
      right: '7%',
      bottom: '10%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: [
        '01月',
        '02月',
        '03月',
        '04月',
        '05月',
        '06月',
        '07月',
        '08月',
        '09月',
        '10月',
        '11月',
        '12月'
      ],
      axisLabel: {
        show: true,
        showMinLabel: true,
        color: '#A3ABAD',
        fontSize: 10,
        rotate: -45
      },
      axisTick: {
        show: false
      },
      splitLine: {
        show: true
      }
    },
    yAxis: {
      name: '单位（吨）',
      nameTextStyle: {
        color: '#A3ABAD',
        fontSize: 10,
        padding: [10, 0, 0, 0]
      },
      type: 'value',
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      minorTick: {
        show: false
      },
      axisLabel: {
        show: true,
        showMinLabel: true,
        color: '#A3ABAD',
        fontSize: 10
      },
      splitLine: {
        show: false
      }
    },
    series: [
      {
        symbol: 'none',
        name: '1号楼',
        type: 'line',
        stack: '总量',
        data: [120, 132, 101, 134, 90, 230, 210, 132, 101, 134, 90, 132]
      },
      {
        symbol: 'none',
        name: '2号楼',
        type: 'line',
        stack: '总量',
        data: [220, 182, 191, 234, 290, 330, 310, 182, 191, 234, 290, 123]
      },
      {
        symbol: 'none',
        name: '3号楼',
        type: 'line',
        stack: '总量',
        data: [150, 232, 201, 154, 190, 330, 410, 232, 201, 154, 190, 421]
      }
    ]
  };
  myChart.setOption(option);
  window.addEventListener('resize', function () {
    myChart.resize();
  });
})();

// 电
(function () {
  let myChart = echarts.init(
    document.querySelector('.right_bottom .bl_bottom .box_content')
  );
  let option = {
    color: ['#02D3FF', '#2274DA', '#6C686C', '#BC4212', '#A82A36', '#DC9C2A'],
    title: {
      text: '电',
      textStyle: {
        color: '#fff',
        fontSize: 16
      }
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      right: 0,
      top: 10,
      itemWidth: 12,
      itemHeight: 12,
      icon: 'rect',
      data: ['1号楼', '2号楼', '3号楼'],
      textStyle: {
        color: '#fff',
        fontSize: 14
      }
    },
    grid: {
      top: '30%',
      left: '3%',
      right: '7%',
      bottom: '10%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: [
        '01月',
        '02月',
        '03月',
        '04月',
        '05月',
        '06月',
        '07月',
        '08月',
        '09月',
        '10月',
        '11月',
        '12月'
      ],
      axisLabel: {
        show: true,
        showMinLabel: true,
        color: '#A3ABAD',
        fontSize: 10,
        rotate: -45
      },
      axisTick: {
        show: false
      },
      splitLine: {
        show: true
      }
    },
    yAxis: {
      name: '单位（度）',
      nameTextStyle: {
        color: '#A3ABAD',
        fontSize: 10,
        padding: [10, 0, 0, 0]
      },
      type: 'value',
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      minorTick: {
        show: false
      },
      axisLabel: {
        show: true,
        showMinLabel: true,
        color: '#A3ABAD',
        fontSize: 10
      },
      splitLine: {
        show: false
      }
    },
    series: [
      {
        symbol: 'none',
        name: '1号楼',
        type: 'line',
        stack: '总量',
        data: [120, 132, 101, 134, 90, 230, 210, 132, 101, 134, 90, 132]
      },
      {
        symbol: 'none',
        name: '2号楼',
        type: 'line',
        stack: '总量',
        data: [220, 182, 191, 234, 290, 330, 310, 182, 191, 234, 290, 123]
      },
      {
        symbol: 'none',
        name: '3号楼',
        type: 'line',
        stack: '总量',
        data: [150, 232, 201, 154, 190, 330, 410, 232, 201, 154, 190, 421]
      }
    ]
  };
  myChart.setOption(option);
  window.addEventListener('resize', function () {
    myChart.resize();
  });
})();

(function () {
  const bigbox = document.querySelector('.bottom_right .tables_con');
  const centers1 = document.querySelector('.bottom_right .centers1');
  const centers2 = document.querySelector('.bottom_right .centers2');

  let str = '';
  let time = null;
  const date = [
    {
      name: '共享充电宝',
      total: 56,
      user: 65,
      now: 63,
      fault: 2
    },
    {
      name: '共享停车位',
      total: 56,
      user: 65,
      now: 63,
      fault: 2
    },
    {
      name: '共享单车',
      total: 56,
      user: 65,
      now: 63,
      fault: 2
    },
    {
      name: '共享雨伞',
      total: 56,
      user: 65,
      now: 63,
      fault: 2
    },
    {
      name: '无人零售机',
      total: 56,
      user: 65,
      now: 63,
      fault: 2
    },
    {
      name: '共享打印机',
      total: 56,
      user: 65,
      now: 63,
      fault: 2
    },
    {
      name: '企业党建',
      total: 56,
      user: 65,
      now: 63,
      fault: 2
    }
  ];

  date
    .map((v) => {
      return `<li><span>${v.name}</span><span>${v.total}</span><span>${v.user}</span><span>${v.now}</span><span class="fault">${v.fault}</span></li>`;
    })
    .forEach((v) => {
      str += v;
    });
  centers1.innerHTML = str;

  function scrollUp(speed) {
    if (centers1.offsetHeight >= centers2.offsetHeight) {
      centers2.innerHTML = centers1.innerHTML;
      time = setInterval(scrol, speed);
      let i = 0;

      bigbox.addEventListener('mouseover', () => {
        clearInterval(time);
      });

      bigbox.addEventListener('mouseleave', () => {
        time = setInterval(scrol, speed);
      });

      function scrol() {
        if (bigbox.scrollTop >= centers1.scrollHeight) {
          i = 0;
          bigbox.scrollTop = 0;
        } else {
          i++;
          bigbox.scrollTop = i;
        }
        if (bigbox.scrollTop % 25 == 0) {
          clearInterval(time);
          time = setInterval(scrol, speed);
        }
      }
    }
  }

  scrollUp(50);
})();

// // 企业数据可视化
(function () {
  let myChart = echarts.init(document.querySelector('.end1_T .T_R'));
  let option = {
    color: ['#0c75ea', '#f36906', '#265f7d', '#00e7c9'],
    title: {
      text: '产业划分',
      fontWeight: 'normal',
      bottom: 0,
      left: '36%',
      textStyle: {
        color: '#fff',
        fontSize: 14
      }
    },
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b} : {c} ({d}%)'
    },
    legend: {
      show: false
    },
    series: [
      {
        name: '产业划分',
        type: 'pie',
        radius: ['40%', '45%'],
        center: ['48%', '45%'],
        label: {
          formatter: '{b}\n{c}',
          align: 'center'
        },
        data: [
          {
            value: 335,
            name: '芯片模拟'
          },
          {
            value: 310,
            name: '解决方案'
          },
          {
            value: 234,
            name: '其他'
          },
          {
            value: 135,
            name: '互联网'
          }
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  };
  myChart.setOption(option);
  window.addEventListener('resize', () => {
    myChart.resize();
  });
})();
(function () {
  let myChart = echarts.init(document.querySelector('.end1_T .T_L'));
  let option = {
    title: {
      text: '企业数量   30家',
      bottom: 0,
      left: '23%',
      textStyle: {
        color: '#fff',
        fontSize: 14,
        fontWeight: 'normal'
      }
    },
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    color: ['#0c75ea', '#f36906', '#265f7d', '#00e7c9'],
    legend: {
      show: false,
      orient: 'vertical',
      left: 10,
      data: ['芯片模拟', '解决方案', '其他', '互联网']
    },
    series: [
      {
        name: '企业数量',
        type: 'pie',
        radius: ['50%', '65%'],
        center: ['40%', '45%'],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: 'center',
          formatter: '{b}\n\n{c}'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: '14',
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: [
          {
            value: 335,
            name: '芯片模拟'
          },
          {
            value: 310,
            name: '解决方案'
          },
          {
            value: 234,
            name: '其他'
          },
          {
            value: 135,
            name: '互联网'
          }
        ]
      }
    ]
  };
  myChart.setOption(option);
  window.addEventListener('resize', () => {
    myChart.resize();
  });
})();
(function () {
  let myChart = echarts.init(document.querySelector('.end1_B .B_R'));
  let option = {
    title: {
      text: '产值    64亿',
      bottom: 0,
      left: '20%',
      textStyle: {
        color: '#fff',
        fontSize: 14,
        fontWeight: 'normal'
      }
    },
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    color: ['#0c75ea', '#f36906', '#265f7d', '#00e7c9'],
    legend: {
      show: false,
      orient: 'vertical',
      left: 10,
      data: ['芯片模拟', '解决方案', '其他', '互联网']
    },
    series: [
      {
        name: '产值',
        type: 'pie',
        radius: ['50%', '65%'],
        center: ['45%', '45%'],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: 'center',
          formatter: '{a}\n\n{d}%'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: '14',
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: [
          {
            value: 335,
            name: '芯片模拟'
          },
          {
            value: 310,
            name: '解决方案'
          },
          {
            value: 234,
            name: '其他'
          },
          {
            value: 135,
            name: '互联网'
          }
        ]
      }
    ]
  };
  myChart.setOption(option);
  window.addEventListener('resize', () => {
    myChart.resize();
  });
})();
(function () {
  let myChart = echarts.init(document.querySelector('.end1_B .B_C'));
  let option = {
    title: {
      text: '税收   12亿',
      bottom: 0,
      left: '20%',
      textStyle: {
        color: '#fff',
        fontSize: 14,
        fontWeight: 'normal'
      }
    },
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    color: ['#0c75ea', '#f36906', '#265f7d', '#00e7c9'],
    legend: {
      show: false,
      orient: 'vertical',
      left: 10,
      data: ['芯片模拟', '解决方案', '其他', '互联网']
    },
    series: [
      {
        name: '产值',
        type: 'pie',
        radius: ['50%', '65%'],
        center: ['45%', '45%'],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: 'center',
          formatter: '{c}\n\n{b}'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: '14',
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: [
          {
            value: 335,
            name: '芯片模拟'
          },
          {
            value: 310,
            name: '解决方案'
          },
          {
            value: 234,
            name: '其他'
          },
          {
            value: 135,
            name: '互联网'
          }
        ]
      }
    ]
  };
  myChart.setOption(option);
  window.addEventListener('resize', () => {
    myChart.resize();
  });
})();
(function () {
  let myChart = echarts.init(document.querySelector('.end1_B .B_L span'));
  let option = {
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    color: ['#0c75ea', '#f36906'],
    legend: {
      show: false
    },
    series: [
      {
        name: '人员',
        type: 'pie',
        radius: ['50%', '65%'],
        center: ['47%', '45%'],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: 'center',
          formatter: '{c}\n\n{b}'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: '14',
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: [
          {
            value: 335,
            name: '高级人才'
          },
          {
            value: 310,
            name: '普通员工'
          }
        ]
      }
    ]
  };
  myChart.setOption(option);
  window.addEventListener('resize', () => {
    myChart.resize();
  });
})();
